<template>
    <el-card class="box-card el-card-flex">
        <div slot="header" class="clearfix">
            <span>
                <i class="el-icon-reading"></i>
                会议室预定
            </span>
            
        </div>
        <div class="text item">
            <el-form :inline="true" class="demo-form-inline" label-width="100px" @submit.native.prevent>
          <el-form-item label="使用时间">
            <el-date-picker
                v-model="start1"
                type="date"
                style="width:150px"
                placeholder="选择日期"
                :picker-options="pickerOptionsS"
                @change="dataChange">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="会议室类型">
            <el-select v-model="select1" placeholder="请选择" @change="seleChange">
                <el-option v-for="(item,k) in this.seleArr" :key="k" :label="item.rootCatName" :value="item.roomCatId"></el-option>
                <!-- <el-option label="大会议室" value="2"></el-option>
                <el-option label="中会议室" value="3"></el-option>
                <el-option label="小会议室" value="4"></el-option>
                <el-option label="公务车" value="5"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="" style="float:right">
              <el-button type="primary" :disabled="isShow" @click="handleCli">预定<i class="el-icon-plus"></i></el-button>
          </el-form-item>
        </el-form>
            <div class="el-flex el-box-column ceshi">
                <el-table
                class="only-table"
                    :data="myDelegateData"
                    border
                    style="width: 100%"
                    height="100%"
                    ref="agentTable"
                    @cell-click="handleCell"
                    @cell-mouse-enter="handMouse"
                    @cell-mouse-leave="handLeave"
                    :cell-style="cellStyle"
                >
                    <el-table-column min-width="140px" :show-overflow-tooltip="true" prop="" label="会议室名称">
                        <template slot-scope="scope">
                           
                            <div class="reserTitle" @click="handleReser(scope.$index,scope.row)">
                                <p>
                                    <span>{{scope.row.roomName}}</span>
                                    <span>{{scope.row.mebmers}}</span>
                                </p>
                                <p>
                                    <span>{{scope.row.positionName}}</span>
                                    <span v-if="scope.row.price">¥<b style="color:red">{{scope.row.price}}</b>元/小时</span>
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="55px" :show-overflow-tooltip="true" v-for="(item,k) in getTimeArr" :key="k" prop="" :label="item" align="center">
                        <template slot-scope="scope">
                            <span class="class-timeout" v-if="scope.row.isTimeout == '1'">已超时</span>
                            <span class="class-timeout" v-if="scope.row.isTimeout == '2'">已预定</span>
                            <span v-if="scope.row.isTimeout == '3'"><i class="el-icon-circle-check"></i></span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
        title="会议室详情"
        :visible.sync="dialogAppVisible"
        :before-close="handleClose" 
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="35%"
        >
            <el-form ref="formReser" label-width="150px" :model="formReser">
                <el-form-item label="会议室名称:" prop="name1">
                    <el-col :span="16">
                        <span>{{formReser.roomName}}</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="会议室类型:" prop="type">
                    <el-col :span="24">
                        <span>{{formReser.rootCatName}}</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="容纳人数:" prop="name2">
                    <el-col :span="24">
                        <span>{{formReser.mebmers}}</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="会议室设备:" prop="shebei">
                    <el-col :span="24">
                        <span>{{formReser.device}}</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="会议室环境:" prop="img">
                    <el-col :span="24">
                        <span>{{formReser.img}}</span>
                    </el-col>
                </el-form-item>
            </el-form>
            
        </el-dialog>
    </el-card>
    
</template>
<script>
import $ from 'jquery'
import {
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Drawer,
    Tabs,
    TabPane,
    Upload
  } from 'element-ui'
  import {
      reservationList, //会议室预定列表
  } from '@/api/conference/reservation.js'
  import {
        categoryList, //会议室类型列表
    } from '@/api/conference/conferenceManage.js'
    import {getTime} from '@/api/conference/Initialize.js'
export default {
    name: 'cinferenceType',
    components: {
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-pagination': Pagination, // 分页
      'el-drawer': Drawer, // 抽屉
      'el-tabs': Tabs, // 标签页
      'el-tab-pane': TabPane, // 标签页列
      "el-upload": Upload, //上传
      
    },
    data(){
        return{ 
            activeName:'first',
            start1:new Date(),
            select1:"0",
            seleArr:[],
            pickerOptionsS: {
                disabledDate(time) {
                    return time.getTime() <= Date.now()-8.64e7 || time.getTime() > Date.now()+(24*60*60*1000)*13;
                },
            },
            myDelegateData:[
                
            ],
            dialogAppVisible:false,
            formReser:{
                roomName:'',
                rootCatName:'',
                mebmers:'',
                device:'',
                img:''
            },
            isShow: true,
            row:{},
            id:'',
            arry: [],
            isTimeout:'',
            getTimeArr:[],
            getCont:0
        }
    },
    created(){
        categoryList({}).then((res)=>{
            if(res.data.code == 10000){
                this.seleArr = res.data.data.records
                this.seleArr.unshift({
                    roomCatId:'0',
                    rootCatName:'全部'
                })
            }
        })
        getTime().then((res)=>{
            if(res.data.code == 10000){
                // this.getTimeArr = res.data.data
                let data = res.data.data
                let s = data.startTime.split(':')[0]
                let e = data.endTime.split(':')[0]
                let cont = e-s;
                if(cont <= 1){
                    this.getTimeArr.push(data.startTime)
                    // _this.myDelegateData[i].reservationList[j].timeArr.push(_this.myDelegateData[i].reservationList[j].endTime)
                }else{
                    // this.getTimeArr.push(data.startTime)
                    if(data.intervalTime == 2){
                        for(var k=0;k<=cont;k+=2){
                            let a = Number(s)+k
                            if(a <10){
                                a = '0'+a
                            }
                            a = a+':00'
                            this.getTimeArr.push(a)
                        }
                    }else{
                        this.getTimeArr.push(data.startTime)
                        for(var k=1;k<=cont;k++){
                            let a = Number(s)+k
                            if(a <10){
                                a = '0'+a
                            }
                            a = a+':00'
                            this.getTimeArr.push(a)
                        }
                    }
                    
                    // this.fun(cont,_this.myDelegateData[i].reservationList[j].timeArr)
                }
            }
        })
        this.getList()
        window.onresize = () => {
            this.$refs.agentTable.doLayout() //监听窗口变化，重绘表格布局
        }
    },
    methods:{
        //获取列表
        getList(){
            var newD1 = new Date(this.start1)
            var Sy1 = newD1.getFullYear()
            var Sm1 = newD1.getMonth()+1
            var Sd1 = newD1.getDate()
            let sel = ''
            if(Sd1 <10){
                Sd1 = '0'+Sd1
            }
            if(this.select1 == '0'){
                sel = ''
            }else{
                sel = this.select1
            }
            reservationList({
                value:{
                    useDate:Sy1+'-'+Sm1+'-'+Sd1,
                    roomCatId:sel
                }
            }).then((res)=>{
                var _this = this
                if(res.data.code == 10000){
                    _this.myDelegateData = res.data.data.records
                    for(var i=0;i<_this.myDelegateData.length;i++){
                        _this.myDelegateData.isTimeout = ''
                        if(_this.myDelegateData[i].reservationList.length >0 && _this.myDelegateData[i].reservationList !==[]){
                            for(var j=0;j<_this.myDelegateData[i].reservationList.length;j++){
                                _this.myDelegateData[i].reservationList[j].timeArr = []
                                let s = _this.myDelegateData[i].reservationList[j].startTime.split(':')[0]
                                let e = _this.myDelegateData[i].reservationList[j].endTime.split(':')[0]
                                let cont = e-s;
                                if(cont <= 1){
                                    _this.myDelegateData[i].reservationList[j].timeArr.push(_this.myDelegateData[i].reservationList[j].startTime)
                                    // _this.myDelegateData[i].reservationList[j].timeArr.push(_this.myDelegateData[i].reservationList[j].endTime)
                                }else{
                                    _this.myDelegateData[i].reservationList[j].timeArr.push(_this.myDelegateData[i].reservationList[j].startTime)
                                    console.log(cont,'cont111111')
                                    if(cont >=2){
                                        for(var k=1;k<=cont-1;k++){
                                            let a = Number(s)+k
                                            if(a <10){
                                                a = '0'+a
                                            }
                                            a = a+':00'
                                            _this.myDelegateData[i].reservationList[j].timeArr.push(a)
                                        }
                                    }else{
                                        for(var k=1;k<=cont;k++){
                                        let a = Number(s)+k
                                        if(a <10){
                                            a = '0'+a
                                        }
                                        a = a+':00'
                                        _this.myDelegateData[i].reservationList[j].timeArr.push(a)
                                    }
                                    }
                                    
                                    // this.fun(cont,_this.myDelegateData[i].reservationList[j].timeArr)
                                }
                            }
                        }
                    }
                    
                    setTimeout(() => {
                        this.$refs.agentTable.doLayout() // 重绘表格宽度，解决表头对不齐的问题
                    }, 0)
                }
            })
        },
        //日期发生改变
        dataChange(){
            console.log(this.arry)
            if(this.arry.length >0){
                this.arry = []
                $('.class-icon,.class-color').remove()
                this.isShow = true;
                // MessageBox.confirm('您要放弃已选择的会议时间吗？', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(() => {
                //     this.myDelegateData.forEach((v)=>{
                //         v.meetingDate = this.start1
                //     })
                //     this.getList()
                // }).catch(() => {})
            }
            
            
        },
        //类型发生改变
        seleChange(){
            
            this.getList()
        },
        //查看会议室
        handleReser(index,row){
            this.dialogAppVisible = true;
            let device = []
            if(row.deviceList){
                row.deviceList.forEach((v)=>{
                    device.push(v.valName)
                })
            }
            
            row.device = device.join(',')
            this.formReser = row;
        },
        //关闭
        handleClose(){
            this.dialogAppVisible = false;
        },
        //点击预定按钮
        handleCli(){
           
            if(this.arry.length>1){
                this.arry.sort()
                console.log(this.arry)
                
                this.row.startTime = this.arry[0]
                this.row.endTime = this.arry[this.arry.length-1]
            }
            // return false
            this.giveFuncEvt(this.row)
        },
        //单元格点击
        handleCell(row, column, cell, event){
            
            let pre = cell.previousElementSibling
            let next = cell.nextElementSibling
            let date = new Date();
            let hour1 = date.getHours();
            let minute1 = date.getMinutes();
            let s1 = 0,s2 = 0
            let hour2 = column.label.split(':')[0]
            let min2 = column.label.split(':')[1]
            s1 = Number(hour2*3600)+Number(min2*60)
            s2 = Number(hour1*3600)+Number(minute1*60)

            let y1 = date.getFullYear()
            let m1 = date.getMonth()+1
            let d1 = date.getDate()
            
            let y2 = this.start1.getFullYear()
            let m2 = this.start1.getMonth()+1
            let d2 = this.start1.getDate()
            let c1 = '', c2 = ''
            let arr = []
            c1 = y1+'-'+m1+'-'+d1
            c2 = y2+'-'+m2+'-'+d2
            //判断如果是超时的时间或会议室名称不可被点击
            if((s1 < s2 || column.label == '会议室名称') && (c1 == c2)){
                return false;
            }
            //判断如果是预定过的会议不可被点击
            if(row.reservationList.length >0){
               for(let i=0;i<row.reservationList.length;i++){
                   if(row.reservationList[i].timeArr.length>0 || row.reservationList[i].timeArr !== undefined){
                        for(let k=0;k<row.reservationList[i].timeArr.length;k++){
                            if(row.reservationList[i].timeArr[k].split(':')[0] == column.label.split(':')[0]){
                                return false
                            }
                        }
                   }
               }
           }
            this.isShow = false;
            if(this.arry.length == 0){
                this.id = ''
                this.isShow = false;
            }
            
            if(this.id){
                if(row.roomId == this.id){
                    cell.innerHTML = `<span class="class-icon"><i class="el-icon-circle-check" style="color:#FFF;font-size:20px"></span>`
                    this.getCont++
                    row.endTime = column.label
                    row.flag = true
                    row.meetingDate = this.start1
                    this.row = row;
                    let key =this.arry.indexOf(column.label);
                    if(this.arry.length >=2){
                        this.arry = []
                        $('.class-icon,.class-color').remove()
                        cell.innerHTML = `<span class="class-icon"><i class="el-icon-circle-check" style="color:#FFF;font-size:20px"></span>`
                        this.arry.push(column.label)
                    }else{
                        this.arry.push(column.label)
                        
                        if(this.arry.length == 0){
                            this.id = ''
                            this.isShow = true;
                        }
                        let str = column.label.split(':')[0]
                        let s = this.arry[0].split(':')[0]
                        let e = this.arry[this.arry.length-2].split(':')[0]
                        let cont = 1
                        if(this.arry.length>0){
                            if(str < s){
                                cont = s-str
                                if(cont !== 1 && cont !== 0){
                                    let nextFlag = true,nextArr = []
                                    for(let i=1;i<cont;i++){
                                        let a = s-i
                                        if(a <10){
                                            a = '0'+a
                                        }
                                        a = a+':00'
                                        if(row.reservationList.length >0){
                                            for(let j=0;j<row.reservationList.length;j++){
                                                if(row.reservationList[j].timeArr.length>0 || row.reservationList[j].timeArr !== undefined){
                                                    for(let k=0;k<row.reservationList[j].timeArr.length;k++){
                                                        if(row.reservationList[j].timeArr[k].split(':')[0] == a.split(':')[0]){
                                                            nextFlag = false
                                                            this.arry.splice(this.arry.length-1,1)
                                                            cell.innerHTML = ``
                                                            Message.warning('该时间段有已预定会议室')
                                                            row.endTime = ''
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        nextArr.push(a)
                                    }
                                    if(nextFlag){
                                        for(let i=0;i<nextArr.length;i++){
                                            this.arry.push(nextArr[i])
                                        }
                                    }
                                }
                                
                                this.arry.sort()
                                let s1 = this.arry[0].split(':')[0]
                                let e1 = this.arry[this.arry.length-1].split(':')[0]
                                let cont1 = e1-s1
                                for(let i=0;i<cont1-1;i++){
                                    next.innerHTML = `<span class="class-color"></span>`
                                    next = next.nextElementSibling
                                }
                                
                            }else if(str > e){
                                cont = str - e
                                if(cont !== 1 && cont !== 0){
                                    let flag = true,perArr = []
                                    for(let i=1;i<cont;i++){
                                        let a = Number(e)+i
                                        if(a <10){
                                            a = '0'+a
                                        }
                                        a = a+':00'
                                        if(row.reservationList.length >0){
                                            for(let j=0;j<row.reservationList.length;j++){
                                                if(row.reservationList[j].timeArr.length>0 || row.reservationList[j].timeArr !== undefined){
                                                    for(let k=0;k<row.reservationList[j].timeArr.length;k++){
                                                        if(row.reservationList[j].timeArr[k].split(':')[0] == a.split(':')[0]){
                                                            flag = false
                                                            this.arry.splice(this.arry.length-1,1)
                                                            cell.innerHTML = ``
                                                            Message.warning('该时间段有已预定会议室')
                                                            row.endTime = ''
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        perArr.push(a)
                                    }
                                    if(flag){
                                        for(let i=0;i<perArr.length;i++){
                                            this.arry.push(perArr[i])
                                        }
                                    }
                                }
                                this.arry.sort()
                                let s2 = this.arry[0].split(':')[0]
                                let e2 = this.arry[this.arry.length-1].split(':')[0]
                                let cont2 = e2-s2
                            
                                for(let i=0;i<cont2-1;i++){
                                    pre.innerHTML = `<span class="class-color"></span>`
                                    pre = pre.previousElementSibling
                                }
                               
                            }
                        }
                    }
                    
                }else{
                    //判断换行清除之前行的样式以及数据
                    //重新给赋值
                    this.arry = []
                    $('.class-icon,.class-color').remove()
                    cell.innerHTML = `<span class="class-icon"><i class="el-icon-circle-check" style="color:#FFF;font-size:20px"></span>`
                    this.arry.push(column.label)
                    this.id = row.roomId;
                    row.meetingDate = this.start1
                    this.row = row;
                }
            }else{
                //第一次点击单元格
                this.arry.push(column.label)
                this.id = row.roomId;
                cell.innerHTML = `<span class="class-icon"><i class="el-icon-circle-check" style="color:#FFF;font-size:20px"></span>`
                row.startTime = column.label
                row.endTime = ''
                row.flag = true
                row.meetingDate = this.start1
                this.row = row;
            }
            //如果数组长度为0.清空id值
            if(this.arry.length == 0){
                this.id = ''
                cell.innerHTML = ''
            }
                
        },
        //鼠标划过
        handMouse(row, column, cell, event){
            let date = new Date();
            let hour1 = date.getHours();
            let minute1 = date.getMinutes();
            let s1 = 0,s2 = 0
            let hour2 = column.label.split(':')[0]
            let min2 = column.label.split(':')[1]
            s1 = Number(hour2*3600)+Number(min2*60)
            s2 = Number(hour1*3600)+Number(minute1*60)

            let y1 = date.getFullYear()
            let m1 = date.getMonth()+1
            let d1 = date.getDate()
            
            let y2 = this.start1.getFullYear()
            let m2 = this.start1.getMonth()+1
            let d2 = this.start1.getDate()
            let c1 = '', c2 = ''
            c1 = y1+'-'+m1+'-'+d1
            c2 = y2+'-'+m2+'-'+d2
            if((s1 < s2 || column.label == '会议室名称') && (c1 == c2)){
                return false;
            }
            if(row.reservationList.length >0){
               for(let i=0;i<row.reservationList.length;i++){
                   if(row.reservationList[i].timeArr.length>0 || row.reservationList[i].timeArr !== undefined){
                        for(let k=0;k<row.reservationList[i].timeArr.length;k++){
                            
                            if(row.reservationList[i].timeArr[k].split(':')[0] == column.label.split(':')[0]){
                                return false
                                // return 'background:red'
                            }
                        }
                   }
               }
            
           }
            // cell.style.background = '#ECF5FF'
            // row.isTimeout = '3';

        },
        //滑过推出
        handLeave(row, column, cell, event){
            let date = new Date();
            let hour1 = date.getHours();
            let minute1 = date.getMinutes();
            let s1 = 0,s2 = 0
            let hour2 = column.label.split(':')[0]
            let min2 = column.label.split(':')[1]
            s1 = Number(hour2*3600)+Number(min2*60)
            s2 = Number(hour1*3600)+Number(minute1*60)

            let y1 = date.getFullYear()
            let m1 = date.getMonth()+1
            let d1 = date.getDate()
            
            let y2 = this.start1.getFullYear()
            let m2 = this.start1.getMonth()+1
            let d2 = this.start1.getDate()
            let c1 = '', c2 = ''
            c1 = y1+'-'+m1+'-'+d1
            c2 = y2+'-'+m2+'-'+d2
            if((s1 < s2 || column.label == '会议室名称') && (c1 == c2)){
                return false;
            }
            // cell.style.background = 'none'
            // row.isTimeout = '3';
        },
        //改变某一列样式
        cellStyle({row, column, rowIndex, columnIndex}){
           
            let date = new Date();
            let hour1 = date.getHours();
            let minute1 = date.getMinutes();
            let s1 = 0,s2 = 0
            let hour2 = column.label.split(':')[0]
            let min2 = column.label.split(':')[1]
            s1 = Number(hour2*3600)+Number(min2*60)
            s2 = Number(hour1*3600)+Number(minute1*60)

            let y1 = date.getFullYear()
            let m1 = date.getMonth()+1
            let d1 = date.getDate()
            
            let y2 = this.start1.getFullYear()
            let m2 = this.start1.getMonth()+1
            let d2 = this.start1.getDate()
            let c1 = '', c2 = ''
            c1 = y1+'-'+m1+'-'+d1
            c2 = y2+'-'+m2+'-'+d2
            if((s1 < s2) && (c1 == c2)){
               
                row.isTimeout = '1';
            }else{
                row.isTimeout = '';
            }
           if(c1 == c2){
               if(row.reservationList.length >0){
                for(let i=0;i<row.reservationList.length;i++){
                    if(row.reservationList[i].timeArr.length>0 || row.reservationList[i].timeArr !== undefined){
                        for(let k=0;k<row.reservationList[i].timeArr.length;k++){
                            if(row.reservationList[i].timeArr[k].split(':')[0] == column.label.split(':')[0]){
                                row.isTimeout = '2';
                                // return 'background:red'
                            }
                        }
                    }
                }
                
            }
           }
           
        },
        
        // //路由跳转
        /*跳转到新增功能路由组件*/
        giveFuncEvt(row) {
            //this.multiRouters是全局提供的自动添加多级路由的方法
            this.$router.addRoutes(this.multiRouters([{
            path: 'creatReservation',
            name: 'creatReservation', //自定义name名称
            component: () => import('@/views/conference/reservation/creatReservation'),
            meta: {
                title: '会议室预定'
            }
            }]));
            this.$router.push(this.routerMatch({
            name: "creatReservation", //顶部导航+侧边导航
            params: {
                row: row
            }
            }))
        },
    }
}
</script>
<style lang="scss">
    .el-tab-pane{
        height:100%
    }
    .reserTitle{
        cursor: pointer;
        padding: 0 10px;
    }
    .reserTitle p span:nth-child(2){
        float: right;
    }
    .class1{
        width: 100%;
        height: 62px;
        background: #ccc;
    }
   .only-table .cell{
       padding: 0!important;
   }
.ceshi>.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0);
}
.class-timeout{
    background:#F5F7FA !important;
    display:block;
    height:32px;
    line-height:32px;
}
.class-icon{
    background: #409EFF!important;
    display: block;
    height: 32px;
    line-height: 38px;
}
.class-color{
    background: #D9ECFF;
    display: block;
    height: 32px;
    line-height: 32px;
}
</style>